<template>
  <div>
    <div class="flex gap-4 mb-4 m-[15px] w-[99%] h-[25px] ml-[30px]">
      <el-checkbox v-model="query.currUser" @change="myPosts"
        >我发布的</el-checkbox
      >
    </div>
    <div class="m-[8px] w-[99%] ml-[20px]">
      <el-scrollbar>
        <div class="container" v-loading="loading">
          <div
            v-if="menuList.items.length > 0"
            v-for="(item, index) in menuList.items"
            :key="index"
            class="item transition-all hover:translate-y-[-3px]"
          >
            <div class="w-[100%] mr-[2%] pb-[10px] rounded-b-lg">
              <div class="w-[100%] mr-[2%] h-[210px]">
                <img class="w-[100%] h-[210px]" :src="handleImgShow(item)" />
              </div>
              <div style="color: aliceblue" class="mt-[5%] font-semibold">
                <span class="w-[90%] inline-block text-left">{{
                  item.name
                }}</span>

                <el-dropdown>
                  <el-icon class="" @click="getButton(index)"
                    ><MoreFilled
                  /></el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="goPreview(item.id)"
                        ><img
                          class="w-[12px] mr-[5px]"
                          src="@renderer/assets/images/yu_lan_xiao.png"
                        />预览</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="addToMyProjects(item.id)"
                        v-if="flag != item.personName"
                        ><img
                          class="w-[12px] mr-[5px]"
                          src="@renderer/assets/images/tian_jia_xiao.png"
                        />添加到我的项目</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="flex justify-between items-center px-[5px] mt-[10px]">
                <div class="flex items-center">
                  <div
                    style="color: #fff"
                    class="bg-[#e08702] mr-[4px] w-[14px] h-[14px] rounded-[50%]"
                  ></div>
                  <div style="color: #fff" class=" ">
                    {{ item.personName }}
                  </div>
                </div>
                <span class="text-[12px] text-[#5b656d]">{{
                  "" + item.pushTime
                }}</span>
              </div>
            </div>
          </div>
          <el-empty
            v-else
            class="mx-auto"
            description="暂无数据"
            :image-size="200"
          /></div
      ></el-scrollbar>
    </div>
    <el-pagination
      :page-size="query.size"
      layout="prev, pager, next"
      :total="query.total"
      @pagination="getProject()"
      class="bottom-content"
      @current-change="onHandleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed } from "vue";
import { getPageList, addToMyProject } from "@renderer/api/publishMenu";
import { getCoverImageUrl } from "@renderer/utils/other";
import { useUserStore } from "@renderer/store/modules/user";
let userStore = useUserStore();
let loading = ref(false);
const { ipcRenderer } = window;
let menuList = reactive({
  items: [],
});
const handleImgShow = (item: any) => {
  if (item.isLocalBg == 1) {
    return getCoverImageUrl(item.bgImgUrlShow);
  } else {
    return item.bgImgUrlShow;
  }
};
const currentIcon = ref();
const query = reactive({
  name: "",
  key: "",
  size: 10,
  current: 1,
  total: 0,
  currUser: ref(false),
});

const props = defineProps({
  searchVal: {
    type: String,
    default: "",
  },
});
watch(
  () => props.searchVal,
  () => {
    query.name = props.searchVal;

    getProject();
  }
);
onMounted(() => {
  setTimeout(() => {
    // 数据加载完成后的逻辑处理
    getProject();
  }, 200);
});
const goPreview = (id) => {
  ipcRenderer.invoke("open-win", {
    url: `/previewOutLine?id=${id}&type=market`,
  });
};
const myPosts = () => {
  getProject();
};
let flag = computed(() => {
  return userStore.userInfo.personName;
});
const addToMyProjects = async (id) => {
  ElMessageBox.confirm("确定添加到我的项目吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    addToMyProject({ id }).then((response: any) => {
      if (response.code == 200) {
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        getProject();
      }
    });
  });
};
// 获取项目列表
function getProject() {
  loading.value = true;

  getPageList(query)
    .then((response: any) => {
      if (response.code == 200) {
        menuList.items = response.data.records || [];
        query.size = response.data.size;
        query.total = response.data.total;
      } else {
        menuList.items = [];
        query.size = 0;
        query.total = 0;
      }
      loading.value = false;
    })
    .catch(() => {
      ElMessage({
        message: "数据获取失败",
        type: "error",
      });
      loading.value = false;
    });
}
const getButton = (index) => {
  if (currentIcon.value === index) {
    currentIcon.value = null;
  } else {
    currentIcon.value = index;
  }
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  console.log(val);
  query.current = val;
  getProject();
};
</script>

<style lang="scss" scoped>
.bottom-content {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 15px;
  margin-bottom: 15px;
}
.el-pagination button {
  background: none;
}

.el-pagination button.is-disabled,
.el-pagination button:disabled {
  background: none;
}

.el-pager li {
  border: 0.5px solid #101014;
  margin: 6px;
  background: none;
}
.el-pager li.is-active {
  color: #fff;
  background: #409eff;
}
.icon {
  margin: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50px;
  background: #e08702;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff;
}
/* 功能按钮样式 */
.el-button {
  border: 0px solid #fff !important;
  margin-left: 5px !important;
}
.el-button:hover {
  background-color: var(--hover-color);
}

/* 并排分布 */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* 块级元素 */
.item {
  width: 20%; /* 每个div占一行的20% */
  height: 40%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
</style>
